<template>
  <section class="UserList-container">
    <el-table :data="projectTask" style="width: 100%" size="medium">
      <el-table-column width="90">
        <template slot="header">
          <slot name="action-bar">
            <i class="iconfont icon-icon_xinzeng" />
          </slot>
        </template>
        <template slot-scope="scope">
          <slot name="row-action-bar" :row="scope.row"></slot>
        </template>
      </el-table-column>
      <el-table-column label="项目">
        <template slot-scope="scope">
          <el-row>
            <el-col :span="10">{{ scope.row.plan_start_date }}</el-col>
            <el-col :span="10">{{ scope.row.plan_end_date }}</el-col>
          </el-row>
          <el-row> {{ scope.row.work_load }} </el-row>
        </template>
      </el-table-column>
      <!-- <el-table-column label="项目需求">
        <template slot-scope="scope">
          {{ demandName(scope.row.project_demand_id) }}
        </template>
      </el-table-column> -->
      <el-table-column prop="name" label="任务名称"></el-table-column>
      <el-table-column prop="create_date" label="创建时间"></el-table-column>
      <el-table-column prop="remark" label="详细说明"></el-table-column>
    </el-table>
  </section>
</template>

<script>
export default {
  props: ["projectTask", "project", "module", "demand"],
  data() {
    return {
      loading: false,
    };
  },
  methods: {
    projectName(project) {
      const projectName = this.project.find((item) => item.value == project);
      return projectName ? projectName.label : "";
    },

    moduleName(module) {
      const moduleName = this.module.find((item) => item.value == module);
      return moduleName ? moduleName.label : "";
    },

    demandName(demand) {
      const demandName = this.demand.find((item) => item.value == demand);
      return demandName ? demandName.label : "";
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
.UserList-container {
  .name-panel {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: auto;

    .icon {
      background: white;
      padding: 2px;
      margin-left: 2px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 0.2rem #999;
      overflow: hidden;
    }

    .content {
      margin-left: 10px;

      .title {
        font-size: 2rem;
        margin-bottom: 5px;
        font-weight: bold;
      }

      .tag {
      }

      .name-admin {
        margin-right: 5px;
      }
    }
  }
}
</style>
